<template>
	<!-- class markdown-body 必须加，否则标签样式会出现问题 -->
   <div class="articlebac">
     <div id="hidebg" v-show="$store.state.show"></div>
      <Top></Top>
      <div class="textBody">
          <Left></Left>
          <div class="Right">
           <Detail :detailArticle="article"></Detail>
           <Footer></Footer>
           </div> 
      </div>
     
     
      
   </div>
 
</template>

<script>
import Detail from '@/components/articleDetail/Detail.vue'
import Top from "@/components/home/Top.vue"
import Left from '@/components/articleDetail/Left.vue';
import Footer from '@/components/articleDetail/Footer.vue';
import {getArticleById} from "@/api/article";
import {getFollow, getUserById} from "@/api/user";


export default {
   name:"App",
   components: {
      Detail,Top,Left,Footer
  },
  data(){
     return{
          article:{
            title:""
          }
     }
  },
  methods: {
    getid(){
      const url = location.search;
      const articleId = url.slice(11);
      if(articleId!==""){
        getArticleById(articleId).then(article=>{
          this.article=article;
          this.$store.commit("GETARTICLE",article)
          document.title=article.title;
          getUserById(this.article.userId).then(user=>{
            this.$store.commit("GETUSER",user)
          })

        });
        getFollow(this.$store.state.article.articleId).then(res=>{
          this.$store.commit("FOLLOW",res);
        })
      }
    }


  },
  mounted(){
    this.getid();



  }



}
</script>

<style>
body,html{
   width: fit-content;
   height: fit-content;
}
.articlebac{
   width: fit-content;
   height: fit-content;
  position: relative;

}
.Right{
  max-width: 1100px;
}
.textBody{
   width: fit-content;
   height: fit-content;
   /* background-color: black; */
   display: flex;
   justify-content: center;
   background-color: rgb(7, 1, 18);

}
#hidebg {
  position:absolute;
  left:0px;top:0px;
  background-color:#000;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.4;  /*非IE浏览器下设置透明度为60%*/

  z-Index:2;
}

a{
   color: #000;
}
h2{
   margin: 0;
}
p{
   margin: 0;
}



</style>